<?php
/**
 * Created by PhpStorm.
 * User: wuchunyin
 * Date: 2018/10/31
 * Time: 11:08
 */

namespace app\index\ui;

use think\facade\Url;

class DepartSelect {

    static public function html($config){

        $c_url = Url::build('dict/getCollege');
        $c_value = isset($config['c_value'])?$config['c_value']:'';
        $c_id = isset($config['c_id'])?$config['c_id']:'ui_college_Id';
        $c_name = isset($config['c_name'])?$config['c_name']:'';
        $c_mist = isset($config['c_mist'])?$config['c_mist']:'';
        $c_title = isset($config['c_title'])?$config['c_title']:'学院';
        $c_col = isset($config['c_col'])?$config['c_col']:'col-sm-6 col-md-6 col-lg-4';

        $b_url = Url::build('dict/getDepartment');
        $b_value = isset($config['b_value'])?$config['b_value']:'';
        $b_id = isset($config['b_id'])?$config['b_id']:'ui_depart_Id';
        $b_name = isset($config['b_name'])?$config['b_name']:'';
        $b_mist = isset($config['b_mist'])?$config['b_mist']:'';
        $b_title = isset($config['b_title'])?$config['b_title']:'部门';
        $b_col = isset($config['b_col'])?$config['b_col']:'col-sm-6 col-md-6 col-lg-4';

        $html = <<<EOF
        
<div class="$c_col" style="padding-top: 4px;padding-bottom: 4px;">
    <div class="input-group" style="width: 100%;">
        <span class="input-group-addon" style="width: 100px;text-align: right"><span style="color:red">$c_mist</span>$c_title</span>
        <select id="$c_id" name="$c_name" class="form-control" onchange="ui_getDepartmentList()">
        </select>
    </div>
</div>

<div class="$b_col" style="padding-top: 4px;padding-bottom: 4px;">
    <div class="input-group" style="width: 100%;">
        <span class="input-group-addon" style="width: 100px;text-align: right"><span style="color:red">$b_mist</span>$b_title</span>
        <select id="$b_id" name="$b_name" class="form-control">
        </select>
    </div>
</div>

<script>

    $(function() {
        ui_getCollegeList();
    });
            
    function ui_getCollegeList() {
        console.log('ui_getCollegeList');
        $.ajax({
            url:"$c_url",
            type:'post',
            success:function(data) {
                // console.log(data);
                var isSelect = false;
                var opt = '<option value="" style="display: none">请选择...</option>';
                $("#$c_id").append(opt);
                for(var i = 0 ; i < data.length ; i++){
                    var opt = "<option value='" + data[i]['COLLEGE_ID'] + "'>" 
                    + data[i]['COLLEGE_ID'] + ":" + data[i]['SHORTNAME'] + "</option>";
                    $("#$c_id").append(opt);
                    if("$c_value" == data[i]['COLLEGE_ID']){
                        isSelect = true;
                    }
                }
                if(isSelect){
                   $("#$c_id").val($c_value); 
                    ui_getDepartmentList();
                }
            }
        });
    }            
    
    function ui_getDepartmentList() {
        console.log('ui_getDepartmentList');
        $("#$b_id").empty();
        var opt = '<option value="" style="display: none">加载中...</option>';
        $("#$b_id").append(opt);
        var collegeId = $("#$c_id").val();
        $.ajax({
            url:"$b_url",
            type:'post',
            data:{collegeId:collegeId},
            success:function(data) {
                // console.log(data);
                var isSelect = false;
                $("#$b_id").empty();
                var opt = '<option value="" style="display: none">请选择...</option>';
                $("#$b_id").append(opt);
                for(var i = 0 ; i < data.length ; i++){
                    var opt = "<option value='" + data[i]['DEPART_ID'] + "'>"
                     + data[i]['DEPART_ID'] + ":" + data[i]['DEPART_SHORT'] + "</option>";
                    $("#$b_id").append(opt);
                    if("$b_value" == data[i]['DEPART_ID']){
                        isSelect = true;
                    }
//                    console.log($b_value + ' ' + data[i]['DEPART_ID'] + ' :' + isSelect);
                }
                if(isSelect){
                    $("#$b_id").val($b_value);
                }
            }
        });
    }    
            
</script>

EOF;
        return $html;
    }



}